<!DOCTYPE HTML>

<html>

	<head>
  
		<style>
		 body {
			margin: 0px;
			padding: 0px;
		  }
		  #myCanvas {
			border: 1px solid #9C9898;
		  }
		</style>
		
		<script src="jquery.js"></script>
		<script type="text/javascript">
		
			window.onload = function() {
			
			var canvas = document.getElementById("myCanvas");
			var context = canvas.getContext("2d");
			
			var startPoint = canvas.height / 5;
			var distance = startPoint;
				
			for(i = startPoint; i <= 4*startPoint;i += distance)
				for(j = startPoint; j <= 4*startPoint; j += distance){
					
					var centerX = i;
					var centerY = j;
					var radius = distance / 10;

					context.beginPath();
					context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
					context.fillStyle = "black";
					context.fill();
					context.lineWidth = distance / 10;
					context.strokeStyle = "black";
					context.stroke();
					
				}
				
				$(function(){

					var point1 = new Array();
					point1['x'] = false;
					point1['y'] = false;
					var point2 = new Array();
					point2['x'] = false;
					point2['y'] = false;

					var c=document.getElementById("myCanvas");
					var cxt=c.getContext("2d");
						
					$(document).click(function(e){
						if ( false === point1['x'] || false === point1['y']) {

							var posX1 = e.pageX;
								
							if(posX1 < (3/2)*startPoint)
								posX1 = startPoint;
							else if(posX1 >= (3/2)*startPoint && posX1 < (5/2)*startPoint)
								posX1 = 2*startPoint;
							else if(posX1 >= (5/2)*startPoint && posX1 < (7/2)*startPoint)
								posX1 = 3*startPoint;
							else if(posX1 >= (7/2)*startPoint)
								posX1 = 4*startPoint;
								
							var posY1 = e.pageY;
						
							if(posY1 < (3/2)*startPoint)
								posY1 = startPoint;
							else if(posY1 >= (3/2)*startPoint && posY1 < (5/2)*startPoint)
								posY1 = 2*startPoint;
							else if(posY1 >= (5/2)*startPoint && posY1 < (7/2)*startPoint)
								posY1 = 3*startPoint;
							else if(posY1 >= (7/2)*startPoint)
								posY1 = 4*startPoint;
								
							point1['x'] = posX1;
							point1['y'] = posY1;
									
							return;
									
						}
							
						else if ( false === point2['x'] || false === point2['y'] ) {
								
							var posX2 = e.pageX;
								
							if(posX2 < (3/2)*startPoint)
								posX2 = startPoint;
							else if(posX2 >= (3/2)*startPoint && posX2 < (5/2)*startPoint)
								posX2 = 2*startPoint;
							else if(posX2 >= (5/2)*startPoint && posX2 < (7/2)*startPoint)
								posX2 = 3*startPoint;
							else if(posX2 >= (7/2)*startPoint)
								posX2 = 4*startPoint;
								
							var posY2 = e.pageY;
						
							if(posY2 < (3/2)*startPoint)
								posY2 = startPoint;
							else if(posY2 >= (3/2)*startPoint && posY2 < (5/2)*startPoint)
								posY2 = 2*startPoint;
							else if(posY2 >= (5/2)*startPoint && posY2 < (7/2)*startPoint)
								posY2 = 3*startPoint;
							else if(posY2 >= (7/2)*startPoint)
								posY2 = 4*startPoint;
									
							point2['x'] = posX2;
							point2['y'] = posY2;
							console.log("second");

							cxt.moveTo(point1['x'], point1['y']);
							cxt.lineTo(point2['x'], point2['y']);
							cxt.stroke();
									
							point1['x'] = point2['x'];
							point1['y'] = point2['y'];	
							point2['x'] = false;
							point2['y'] = false;
						}
								
					});
						
				});
			
			}

		</script>
	
	</head>
  
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
	</body>
  
</html>